<template>
  <div>
    <a-modal
      :centered="true"
      class="service-name-modal"
      :open="props.topControlsState.serviceModalVisible"
      ok-text="保存"
      :title="`${props.serveState.serviceName}-算法参数配置`"
      width="1048px"
      :body-style="{ height: '638px' }"
      @cancel="onClose"
    >
      <div class="configure-forms">
        <!-- 右边配置表单 -->
        <div class="_forms">
          <div class="title">{{ props.serveState.serviceName }}</div>
          <service-form
            ref="serviceFormRef"
            :show-coveralls-library="true"
            :show-face-library="false"
          ></service-form>
        </div>
      </div>
      <template #footer>
        <a-button class="reset" @click="onReset">恢复默认配置</a-button>
        <a-button size="small" class="btn-default" @click="onClose"
          >取消</a-button
        >
        <a-button
          v-if="!OfflineStatus"
          size="small"
          type="primary"
          :loading="confirmLoading"
          @click="onSubmitSave"
          >确定</a-button
        >
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts" name="service-name-modal">
import ServiceForm from "./ServiceForm/ServiceForm.vue";
import { AIConfigurationAPI } from "../../api";
import { g6DeepClone } from "glasssix-utils-ts";
import type {
  CameraInfoState,
  TopControlsState,
  ServeState,
  PageControlState,
  AiServiceListItem,
} from "../../type";
type _Props = {
  serveState: ServeState;
  topControlsState: TopControlsState;
  pageControlState: PageControlState;
  cameraInfoState: CameraInfoState;
};
const props = withDefaults(defineProps<_Props>(), {
  serveState: () => {
    return {} as ServeState;
  },
  topControlsState: () => {
    return {} as TopControlsState;
  },
  pageControlState: () => {
    return {} as PageControlState;
  },
  cameraInfoState: () => {
    return {} as CameraInfoState;
  },
});

const emits = defineEmits<{
  (e: "close"): void;
  (e: "ok", isChange: boolean, deviceAISrvCustomizeConfig?: any): void;
}>();

const OfflineStatus = ref(true);

// 恢复默认值
const onReset = async () => {
  try {
    let res = await AIConfigurationAPI.resetDefaultAiConfig({
      boxSerial: props.cameraInfoState.boxSerial,
      aiSrvType: props.serveState.serviceType,
      id: props.serveState.serviceId,
    });
    nextTick(() => {
      serviceFormRef.value?.setFormData(res.data);
    });
  } catch (error) {
    console.log(error);
  }
};

/**
 * ----------------------------------------------- 自定义AI配置-表单 ---------------------------------------------
 */
const serviceFormRef = ref<InstanceType<typeof ServiceForm>>();

const confirmLoading = ref(false);

const onClose = (): void => {
  emits("close");
};

//弹窗表单提交
const onSubmitSave = async (): Promise<void> => {
  try {
    const formData = await serviceFormRef.value?.getFormData();
    const isChange = await serviceFormRef.value?.getIsChange();

    emits("ok", isChange as boolean, formData);
  } catch (error) {
    console.error(error);
  }
};

/**
 * ----------------------------------------------- 识别区域====》算法配置 ---------------------------------------------
 */

// 获取右侧表单数据
const getRightFromData = async (): Promise<void> => {
  let serveObj = props.serveState.serviceList.find(
    (item) => props.serveState.serviceId === item.id
  ) as AiServiceListItem;
  let formData: any;
  if (serveObj.deviceAISrvCustomizeConfig) {
    formData = g6DeepClone(serveObj.deviceAISrvCustomizeConfig);
  } else {
    const { data } = await AIConfigurationAPI.getSrvConfigDetailInfo({
      boxSerial: props.cameraInfoState.boxSerial,
      id: props.serveState.serviceId,
    });
    formData = data;
  }
  nextTick(() => {
    serviceFormRef.value?.setFormData(formData);
  });
};

// 添加识别区域(算法配置)
let video = ref<HTMLVideoElement>();

const watchStop = watch(
  () => props.topControlsState.serviceModalVisible,
  () => {
    if (props.topControlsState.serviceModalVisible) {
      getRightFromData();
    }
  }
);
onMounted(() => {
  video.value = document.getElementById("cameraVideo") as HTMLVideoElement;
  OfflineStatus.value = props.cameraInfoState.status === "0" ? true : false;
});
onUnmounted(() => {
  watchStop();
});
</script>

<style lang="less">
// 弹窗
.service-name-modal {
  :deep(.ant-modal-body) {
    padding: 0 !important;
  }

  .reset {
    border: none;
  }

  .name-form {
    .ant-form-item-required {
      &::after {
        display: none;
      }
    }
  }

  .configure-forms {
    display: flex;

    .AI-list {
      display: flex;
      overflow-y: scroll;
      width: 200px;
      height: 724px;
      border-right: 1px solid @borderColor02;
      padding: 16px 7px 0 12px;
      background: rgba(22, 31, 49, 0.5);
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;

      .tab-list-item {
        position: relative;
        width: 160px;
        height: 56px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 700;
        line-height: 56px;
        text-align: center;
        color: @text03;
        background: #21293c;
        cursor: pointer;
      }

      .configuration-area {
        position: relative;

        .icon-close-circle-fill {
          position: absolute;
          top: 28%;
          right: 20%;
          display: none;
          font-size: 16px;
          color: #8b949e;
        }

        &:hover {
          .icon-close-circle-fill {
            display: block;
            cursor: pointer;
          }
        }

        .main-right-list-item {
          display: flex;
          width: 160px;
          height: 56px;
          border-radius: 8px;
          padding: 16px;
          color: @text01;
          background: @mask02;
          align-items: center;
          cursor: pointer;
        }

        &.active {
          border: 1px solid @primary01;
          border-radius: 8px;
          background: @secondary04 !important;
        }
      }
    }

    ._forms {
      overflow-y: scroll;
      height: 648px;
      padding: 12px 32px;

      .title {
        margin-bottom: 8px;
        font-size: 18px;
        font-weight: 700;
        font-style: normal;
        line-height: 26px;
        color: @text01;
      }
    }
  }
}
</style>
